<template>
	<view>
		<view class="tabbar">
			<view class="item" :class="{active:active==1}" @click="goUrl('/pages/index')">
				<image v-if="active==1" src="@/static/tabbar/tabbar-icon1-1.png" mode=""></image>
				<image v-else src="@/static/tabbar/tabbar-icon1.png" mode=""></image>
				<view class="">
					Home
				</view>
			</view>
			<view class="item" :class="{active:active==2}" @click="goUrl('/pages/wallet/index')">
				<image v-if="active==2" src="@/static/tabbar/tabbar-icon2-1.png" mode=""></image>
				<image v-else src="@/static/tabbar/tabbar-icon2.png" mode=""></image>
				<view class="">
					Wallet
				</view>
			</view>
			<view class="item" :class="{active:active==3}" @click="goUrl('/pages/transactions/list')">
				<image v-if="active==3" src="@/static/tabbar/tabbar-icon3-1.png" mode=""></image>
				<image v-else src="@/static/tabbar/tabbar-icon3.png" mode=""></image>
				<view class="">
					Transactions
				</view>
			</view>
		</view>
		<view class="seat">

		</view>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		props: ['active'],
		data() {
			return {

			};
		},
		methods: {
			goUrl(url) {
				uni.redirectTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.tabbar {
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -10rpx 10rpx 0rpx rgba(53, 53, 53, 0.04);
		display: flex;
		position: fixed;
		width: 100vw;
		bottom: 0;
		left: 0;
		font-size: 22rpx;
		line-height: 0;
		color: #9696A0;

		.item {
			width: calc(100%/3);
			text-align: center;

			image {
				width: 60rpx;
				height: 60rpx;
				display: block;
				margin: 0 auto;
			}
		}

		.active {
			color: #333;
		}
	}

	.seat {
		height: 100rpx;
	}
</style>